<template>
	<view class="table-container">
		<view class="table-left">
			<view class="button back" @click="back">返回</view>
			<view class="button save" @click="save">保存</view>
			<view class="table-name-input">
				<input type="text" v-model="name" maxlength="10" disabled />
			</view>
			<!-- 已经点过的 -->
			<view class="order-lists history-order" v-for="(order,indexT) in table.order" :key="indexT">
				<view>第{{ (indexT+1) }}次订单</view>
				<view class="order-item" v-for="(item,index) in order" :key="index">
					<view class="order-name">{{ item.name }}</view>
					<view class="order-num">×{{ item.num}}</view>
					<view class="order-money">￥{{ item.money * item.num}}</view>
				</view>
			</view>
			<!-- 本次加餐 -->
			<view class="order-lists">
				<view>本次加餐</view>
				<view class="order-item" v-for="(item,index) in order" :key="index" @longpress="delOrder(item,index)">
					<view class="order-name">{{ item.name }}</view>
					<view class="order-num" @click="editNum(item,index)">×{{ item.num}}</view>
					<view class="order-money">￥{{ item.money * item.num}}</view>
				</view>
			</view>
			<view class="order-total">加餐前金额：<span>{{ table.money }}元</span></view>
			<view class="order-total">本次加餐消费：<span>{{ totalMoney }}元</span></view>
			<view class="order-total">加餐后金额：<span>{{ parseInt(table.money) + parseInt(totalMoney) }}元</span></view>
		</view>
		<view class="table-right">
			<view class="menu">菜单</view>
			<view class="menu-lists">
				<!-- 自定义点餐 -->
				<view class="goods-item goods-item-custom" @click="customGoods">
					点击自定义加餐
				</view>
				<!-- 商品列表 -->
				<view class="goods-item" v-for="(item,index) in goods" :key="index">
					<view class="goods-name">{{ item.name }}</view>
					<view class="goods-money">￥{{ item.money }}</view>
					<uni-icons class="goods-add-icon" type="redo-filled" size="25" color="blue"
						@click="addOrder(index)">
					</uni-icons>
				</view>
			</view>
		</view>

		<!-- 修改参数窗口 -->
		<uni-popup ref="editNum">
			<view class="model-container">
				<view class="model-title">修改参数</view>
				<view class="model-input">
					数量：<input type="number" v-model="editItem.num" maxlength="3">
				</view>
				<view class="model-input">
					单价：<input type="number" v-model="editItem.money" maxlength="3">
				</view>
				<view class="model-button">
					<view class="model-ok" @click="editNumOk">确定</view>
					<view class="model-no" @click="closeModel">取消</view>
				</view>
			</view>
		</uni-popup>

		<!-- 自定义加餐弹窗 -->
		<uni-popup ref="customGoodsModel">
			<view class="model-container">
				<view class="model-title">自定义点餐</view>
				<view class="model-input">
					名称：<input type="text" v-model="customGoodsObj.name" maxlength="10">
				</view>
				<view class="model-input">
					数量：<input type="number" v-model="customGoodsObj.num" maxlength="3">
				</view>
				<view class="model-input">
					单价：<input type="number" v-model="customGoodsObj.money" maxlength="3">
				</view>
				<view class="model-button">
					<view class="model-ok" @click="saveCustomGoods">确定</view>
					<view class="model-no" @click="closeCustomGoods">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: [],
				order: [],
				totalMoney: 0,
				name: "X号桌",
				editItem: {
					money: 0,
					name: "",
					num: 0,
				},
				editIndex: 0,
				table: {},
				customGoodsObj: {
					name: "",
					money: "",
					num: "",
				}
			}
		},
		onLoad(data) {
			this.goods = JSON.parse(this.$common.getStorage('goods', JSON.stringify([])))
			this.table = JSON.parse(this.$common.getStorage(data.name, JSON.stringify({})))
			this.name = this.table.name
		},
		methods: {
			// 返回
			back() {
				uni.navigateBack()
			},
			// 初始化参数
			initAppend() {
				this.order = []
				this.totalMoney = 0
			},
			// 保存
			save() {
				if (this.order.length == 0) {
					uni.showToast({
						icon: "none",
						title: "无订单！无法保存！"
					})
				} else {
					if (!uni.getStorageSync(this.name)) {
						uni.showToast({
							icon: "none",
							title: "桌号不存在！无法加餐！"
						})
					} else {
						this.totalMoneyFunc()
						this.table.order[this.table.order.length] = this.order
						this.table.money = parseInt(this.table.money) + parseInt(this.totalMoney)
						uni.setStorageSync(this.name, JSON.stringify(this.table))
						uni.showToast({
							title: "保存成功~"
						})
						this.order = []
						this.totalMoney = 0
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}

			},
			// 统计价格
			totalMoneyFunc() {
				let totalMoney = 0
				this.order.find((item) => {
					totalMoney = parseInt(totalMoney) + parseInt(item.num * item.money)
				})
				this.totalMoney = parseInt(totalMoney)
			},
			// 添加商品到订单
			addOrder(index) {
				let flag = this.order.find((item) => {
					if (item.name === this.goods[index].name && item.money == this.goods[index].money) {
						item.num++
						return true
					}
				})

				if (flag === undefined) {
					this.order = this.order.concat({
						name: this.goods[index].name,
						money: parseInt(this.goods[index].money),
						num: 1,
					})
				}

				// 统计价格
				this.totalMoneyFunc()

				// 移动可视区域到底部
				this.$nextTick(() => {
					document.getElementsByClassName('order-total')[2].scrollIntoView({
						behavior: 'smooth',
						block: 'end'
					})
				})
			},
			// 修改数量
			editNum(item, index) {
				this.editItem = item
				this.editIndex = index
				this.$refs['editNum'].open()
			},
			// 关闭模态框
			closeModel() {
				this.$refs['editNum'].close()
			},
			// 确定修改数量
			editNumOk() {
				this.order[this.editIndex].num = this.editItem.num
				this.order[this.editIndex].money = this.editItem.money
				this.totalMoneyFunc()
				this.closeModel()
			},
			// 删除餐品
			delOrder(item, index) {
				uni.showModal({
					'title': "提示",
					'content': "是否删除" + item.name + "?",
					success: (res) => {
						if (res.confirm) {
							this.order.splice(index, 1)
							this.totalMoneyFunc()
							uni.showToast({
								'title': "删除成功~~"
							})
						}
					}
				})
			},
			// 打开自定义加餐模态框
			customGoods() {
				this.$refs['customGoodsModel'].open()
			},
			// 关闭自定义加餐模态框
			closeCustomGoods() {
				this.$refs['customGoodsModel'].close()
			},
			// 保存自定义加餐
			saveCustomGoods() {
				this.order = this.order.concat(this.customGoodsObj)
				uni.showToast({
					'title': "添加成功"
				})
				this.totalMoneyFunc()
				this.customGoodsObj = {
					name: "",
					money: "",
					num: "",
				}
			}
		}
	}
</script>

<style>
	uni-page-body,
	#app {
		width: 100%;
		height: 100%;
	}

	.table-container {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.table-left {
		width: 300px;
		height: 100%;
		border-right: 1px solid #333333;
		overflow: scroll;
	}

	.table-right {
		position: relative;
		width: calc(100% - 300px);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.menu {
		width: 100%;
		height: 40px;
		text-align: center;
		font-size: 30px;
		border-bottom: 2px solid #333333;
		padding: 10px 0 10px 0;
	}

	.menu-lists {
		width: 100%;
		height: calc(100% - 102px);
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
		padding: 20px 0;
	}

	.back {
		text-align: center;
		background-color: #4F4745;
		border-radius: 10px;
	}

	.save {
		text-align: center;
		background-color: #00aaff;
		border-radius: 10px;
	}

	.table-name-input {
		margin: 30px auto;
		width: 90%;
		box-sizing: border-box;
		font-size: 20px;
		border: 1px solid #d4d4d4;
	}

	.order-lists {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.history-order {
		padding-bottom: 50px;
		color: #333333;
	}

	.order-item {
		font-size: 18px;
		width: 90%;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 1px solid #333333;
		margin-bottom: 5px;
		padding-bottom: 5px;
		text-align: center;
	}

	.order-name {
		width: 33.33%;
	}

	.order-num {
		width: 33.33%;
		color: #007AFF;
	}

	.order-money {
		width: 33.33%;
		color: red;
	}

	.order-total {
		width: 100%;
		text-align: center;
		padding-top: 20px;
		font-size: 24px;
		color: red;
	}

	.table-name-input input {
		font-size: 24px;
		text-align: center;
	}

	.goods-item {
		width: 90%;
		height: 40px;
		border: 1px solid #333333;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10px;
	}

	.goods-item-custom {
		background-color: #a8a8a8;
	}

	.goods-name {
		width: 180px;
		font-size: 18px;
	}

	.goods-money {
		font-size: 18px;
		width: 100px;
	}

	.model-container {
		width: 300px;
		border-radius: 10px;
		background-color: white;
		padding-bottom: 10px;
	}

	.model-title {
		width: 100%;
		text-align: center;
		font-size: 18px;
		padding: 10px 0;
		border-bottom: 1px solid #333333;
	}

	.model-input {
		width: 50%;
		margin: 0 auto;
		padding: 10px 0;
	}

	.model-input input {
		width: 100%;
		border: 1px solid #333333;
		box-sizing: border-box;
		text-align: center;
	}

	.model-button {
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		color: white;
	}

	.model-ok {
		width: 50px;
		height: 30px;
		background-color: #007AFF;
		line-height: 30px;
		border-radius: 5px;
		background-color: #00aa00;
	}

	.model-no {
		width: 50px;
		height: 30px;
		background-color: #55557f;
		line-height: 30px;
		border-radius: 5px;
	}

	@media all and (max-width: 700px) {
		.table-container {
			display: block;
		}

		.table-left {
			width: 100%;
			height: 50%;
			border: none;
		}

		.table-right {
			width: 100%;
			height: 50%;
			border: none;
			border-top: 2px solid #333333;
			box-sizing: border-box;
		}

		.menu {
			display: none;
		}

		.menu-lists {
			height: 100%;
		}

		.history-order {
			text-align: center;
		}

		.order-item {
			text-align: center;
		}
	}
</style>
